<template>
  <div class="custom-dialog" :class="className" :visble="visible"
       :style="{ display: visible?'block':'none' }">
    <el-row class="header">
      <el-col :span="20" class="title">
        <slot name="title">
          {{title}}
        </slot>
      </el-col>
      <el-col :span="4">
        <el-button class="action-close" @click="callback">{{returnButtonName}}</el-button>
      </el-col>
    </el-row>
    <div class="custom-dialog-wrap">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "custom-dialog",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      callback: Function,
      title: String,
      className:String,
      returnButtonName: {
        type: String,
        default: '关闭'
      }
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>

  .custom-dialog {
    position: absolute;
    left: 0;
    top: 81px;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    min-height: 100%;
    .header{
      padding: 20px 20px 0;
      line-height: 30px;
      .title{
        font-size: 20px;
      }
      .el-col-4{
        text-align: right;
      }
    }
  }
</style>


